import React from 'react'
import { Card, Button, Spin, Icon, Alert } from 'antd'
import './ul.less'
export default class Loading extends React.Component {
    render(){
        return <div className="b-container">
                <Card title="spin用法" className="card" hoverable={true}>
                <Spin size="small" className="spin" style={{margin:"20px"}} />
                <Spin className="spin"/>
                <Spin size="large" className="spin" />

                <Spin indicator={<Icon type="loading" />} />
                </Card>
            <Card title="内容遮罩" className="card">
                <Alert
                    message="React"
                    description="欢迎来到React高级实战课程"
                    type="info"
                    style={{ marginBottom: 10 }}
                />
                <Spin>
                    <Alert
                        message="React"
                        description="欢迎来到React高级实战课程"
                        type="warning"
                        style={{ marginBottom: 10 }}
                    />
                </Spin>
                <Spin tip="加载中...">
                    <Alert
                        message="React"
                        description="欢迎来到React高级实战课程"
                        type="warning"
                        style={{ marginBottom: 10 }}
                    />
                </Spin>
                <Spin indicator={<Icon type="loading" />} tip="加载中...">
                    <Alert
                        message="React"
                        description="欢迎来到React高级实战课程"
                        type="warning"
                    />
                </Spin>
            </Card>
                </div>
    }
}